<!DOCTYPE html>
<html>
<head lang="zh">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/base.css">
	<style>
		table
		{
			border: solid thin #000000;
			border-collapse: collapse;
			margin: 10px;;
		}
	</style>
	<title>控制DOM层级创建和删除元素的示例</title>
</head>
<body>
	<noscript>此文档需要JavaScript支持才能正常使用</noscript>
	<p>要注意添加元素的顺序，是一层层的添加，虽然有点麻烦，不过这个恐怕会很有用。可以试着多按几个添加，然后再按删除试试。<a href="cloneElement.html">也可以使用clone方式来复制元素再添加，不过文本控制不太方便。</a> </p>
	<p>要想方便地替换元素内容，可使用outerHTML属性，因为它表示元素本身及其子元素，比如：</p>
	<pre>
		var source = document.getElementById('apple');
		var target = document.getElementById('targetrow');
		target.innerHTML = source.innerHTML;
		source.outerHTML = '&lt;tr id="targetrow"&gt;&lt;td&gt; This is the palaceholder &lt;/td&gt;&lt;/tr&gt;';
	</pre>
	<table border="1">
		<thead><th>Name</th><th>Color</th></thead>
		<tbody id="fruitsBody">
			<tr><td>Banana</td><td>Yellow</td></tr>
			<tr><td>Apple</td><td>Red</td></tr>
		</tbody>
	</table>

	<table border="1">
		<thead><th>Name</th><th>Color</th></thead>
		<tbody>
		<tr><td>Banana</td><td>Yellow</td></tr>
		<tr  id="apple"><td>Apple</td><td>Green</td></tr>
		</tbody>
	</table>

	<button id="add">Add Element</button>
	<button id="remove">Remove Element</button>
	<button id="move">Move Row</button>
	<!-- JavaScript脚本链接请在此处插入 -->
	<script>
		var tableBody = document.getElementById('fruitsBody');

		document.getElementById('add').onclick = function(){
			var row = tableBody.appendChild(document.createElement('tr'));
			row.setAttribute('id', 'newrow');
			row.appendChild(document.createElement('td')).appendChild(document.createTextNode('Plum'));
			row.appendChild(document.createElement('td')).appendChild(document.createTextNode('Purple'));
		};

		document.getElementById('remove').onclick = function(){
			var row = document.getElementById('newrow');
			row.parentNode.removeChild(row);
		};

		document.getElementById('move').onclick = function(){
			var row = document.getElementById('apple');
			document.getElementById('fruitsBody').appendChild(row);
		}

	</script>
</body>
</html>